<template>
  <div class="container">
    <div class="container__header">
      <Header :currentId="1" @change="TimeChange"/>
    </div>
    <div class="container__content">
      <div class="container__content__top">
        <div class="top-list">
            <home-page-statistics :statistics="statistics" @homeStatistics="homeStatistics"/>
        </div>
      </div>
      <div class="container__content__left">
        <div class="real-time-title flex-row justify-start">
          <img src="@/assets/biaoti@2x.png" />
          <span>实时抓拍</span>
        </div>
        <div class="real-time-count justify-between">
          <div class="num-tip">
            <span style="padding-right: 8px">抓拍总数</span>
            <animate-number class="num-count" :from="prevTotalSnap" :to="snapTotal" :key="snapTotal" duration="1000"
              easing="easeOutQuad" :formatter="numberToCurrencyNo"></animate-number>
          </div>
          <div class="num-tip">
            <span style="padding-right: 8px">今日抓拍</span>
            <animate-number class="num-count" :from="prevTodaySnap" :to="currentDaySnapTotal" :key="currentDaySnapTotal"
              duration="1000" easing="easeOutQuad" :formatter="numberToCurrencyNo"></animate-number>
          </div>
        </div>

        <div style="overflow: auto">
          <div class="snap-photos" v-for="(item, index) in snapPhotosArr.slice(0, 3)" :key="index">
            <snap-photos :snapPhotos="item"></snap-photos>
          </div>
        </div>
      </div>
      <div class="container__content__footer">
        <div class="waring-count flex-row justify-start">
          <img src="@/assets/biaoti@2x.png" />
          <span>预警事件</span>
          <div>
            <span class="num-tip">预警总数</span>
            <animate-number class="num-count" :from="prevTotalWarning" :to="totalWarning" :key="totalWarning"
              duration="1000" easing="easeOutQuad" :formatter="numberToCurrencyNo"></animate-number>
          </div>

          <div>
            <span class="num-tip">今日预警</span>
            <animate-number class="num-count" :from="prevTodayWarning" :to="currentDayWarning" :key="currentDayWarning"
              duration="1000" easing="easeOutQuad" :formatter="numberToCurrencyNo"></animate-number>
          </div>
        </div>

        <div class="warning-box justify-between">
          <div v-for="(item, index) in warnArr.slice(0, 4)" :key="index">
            <div class="warning-box__item" v-if="index < 4">
              <warning-info :warnObj="item" :list="warnArr.slice(0, 4).map(_item => _item.path)"></warning-info>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container__icon">
      <div v-for="item in videoList" :key="item.id">
        <img src="@/assets/shexiangtou@2x.png" :class="`shexiangtou${item.id}`" @click="handleClickVideo(item)" />
        <div :class="`video${item.id}`" v-if="item.isOpen" style="background: rgba(90, 146, 146, 0.6)">
          <div style="
              width: 90%;
              height: 85%;
              margin: 0 auto;
              color: #fff;
              padding: 10px 0;
              box-sizing: border-box;
            ">
            <div class="justify-between camera-info">
              <span style="color: #fff938">{{ item.cameraName }}</span>
              <span>
                {{ currentTime }}
                <i style="cursor: pointer" class="el-icon-circle-close" @click="handleClickVideo(item)"></i>
              </span>
            </div>
            <vPlayer :vID="item.id" :vUrl="item.pushUrl"></vPlayer>
            <div class="justify-between camera-info">
              <span>{{ item.position }}</span>
              <span>状态：{{ item.status == 1 ? "打开" : "关闭" }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="jiaofei">
        <img src="@/assets/jiaofeiqu@2x.png" />
        <span>缴费区</span>
      </div>
      <div class="xiuxi">
        <img src="@/assets/xiuxi@2x.png" />
        <span>休息区</span>
      </div>
      <div class="zhonghe">
        <img src="@/assets/zonghe@2x.png" />
        <span>综合业务办理区</span>
      </div>
      <div class="damen">
        <img src="@/assets/damen@2x.png" />
        <span>大门</span>
      </div>
      <div class="kafei">
        <img src="@/assets/kafei@2x.png" />
        <span>咖啡区</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Header from "@/components/Header.vue";
import SnapPhotos from "@/components/SnapPhotos.vue";
import WarningInfo from "@/components/WarningInfo.vue";
import vPlayer from "@/components/vPlayer.vue";
import { numberToCurrencyNo } from "@/utils/numberToCurrency";
import HomePageStatistics from "@/components/HomePageStatistics.vue"

import moment from "moment";
import {
  getSnapList,
  getwarningList,
  getCameraList,
  getHomepageStatistics
  // getWarningTypeList,
} from "@/api/home";

export default {
  name: "HomeView",
  components: {
    Header,
    SnapPhotos,
    WarningInfo,
    vPlayer,
    HomePageStatistics
  },

  computed: {
    ...mapGetters(["userId"]),
    ...mapState("message", ["socket"])
  },

  data() {
    return {
      numberToCurrencyNo,
      prevTotalSnap: 0,
      prevTodaySnap: 0,

      currentDaySnapTotal: 0, //今日抓拍数
      snapTotal: 0, //抓拍总数
      snapPhotosArr: [],

      prevTotalWarning: 0,
      prevTodayWarning: 0,

      totalWarning: 0, //预警总数
      currentDayWarning: 0, //今日预警数
      warnArr: [],

      videoList: [], //摄像头列表
      currentVideo: 1,

      //     wsUrl: "ws://119.91.25.28:8082/websocket", //socket
      //wsUrl: "ws://127.0.0.1:8082/websocket", //socket
      wsUrl: process.env.VUE_APP_SOCKET_API,
      currentTime: "",
      timer: null,
      listTimer: null,
      statistics: {},// 统计数据
      startTime: "", // 选择时间
    };
  },
  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.listTimer);
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
    }, 1000);

    this.listTimer = setInterval(() => {
      this.getSnapLists();
      this.getwarningLists();
    }, 60000);

    Promise.all([
      getSnapList({ zoneId: 0 }),
      getwarningList({ zoneId: 0 }),
      getCameraList()
    ]).then(res => {
      // console.log(res);
      if (res[0].code == 200) {
        this.snapPhotosArr = res[0].data.lists;
        this.currentDaySnapTotal = res[0].data.currentDaySnapTotal;
        this.snapTotal = res[0].data.snapTotal;
      }
      if (res[1].code == 200) {
        this.warnArr = res[1].data.lists;
        this.currentDayWarning = res[1].data.currentDayWarning;
        this.totalWarning = res[1].data.totalWarning;
      }
      if (res[2].code == 200) {
        res[2].data &&
          res[2].data.forEach(item => {
            item.isOpen = false;
            this.videoList.push(item);
          });
      }
    });

    this.getHomepageStatistics();
  },
  methods: {
    handleClickVideo(data) {
      this.currentVideo = data.id;
      let index = this.videoList.findIndex(item => item.id == data.id);
      this.videoList[index].isOpen = !this.videoList[index].isOpen;
    },

    async getSnapLists() {
      let res = await getSnapList({ zoneId: 0 });
      if (res.code == 200) {
        this.snapPhotosArr = res.data.lists;
        this.currentDaySnapTotal = res.data.currentDaySnapTotal;
        this.snapTotal = res.data.snapTotal;
      }
    },

    async getwarningLists() {
      let res = await getwarningList({ zoneId: 0 });
      if (res.code == 200) {
        this.warnArr = res.data.lists;
        this.currentDayWarning = res.data.currentDayWarning;
        this.totalWarning = res.data.totalWarning;
      }
    },

    // 首页统计
    async getHomepageStatistics() {
      let res = await getHomepageStatistics({ startTime: this.startTime});
      if (res.code == 200) {
        this.statistics = res.data;
      }
    },
    TimeChange(val) {
      this.startTime = val;
      this.getHomepageStatistics()
    },
    homeStatistics(index){
      if (index === 'userSum'){
        this.$router.push({ name:'userSum', params: {startTime:this.startTime}});
      }else if (index === 'durationAvg'){
        this.$router.push({ name:'durationAvg', params: {startTime:this.startTime}});
      }else if (index === 'warningSum'){
        this.$router.push({ name:'warningSum', params: {startTime:this.startTime}});
      }else if(index === 'disposeWarning'){
        this.$router.push({ name:'disposeWarning', params: {startTime:this.startTime}});
      }
    }
  }
};
</script>


<style lang="scss" scoped>
.list-complete-enter-active,
.list-complete-leave-active {
  transition: all 2s;
}

.list-complete-enter,
.list-complete-leave-to {
  opacity: 0;
}

.container {
  background-image: url("../assets/ditu.png");
  background-repeat:no-repeat;
  background-position: bottom;
  &__content {
    width: 100%;

    .num-tip {
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      padding-right: 8px;
    }

    .num-count {
      color: #fff938;
      font-size: 14px;
    }

    &__left {
      width: 236px;
      height: fit-content;
      background-color: rgba(48, 49, 54, 0.5);
      margin-top: 18px;
      margin-left: 10px;
      padding-bottom: 10px;

      .real-time-title {
        background: url(@/assets/rectangle.png) no-repeat;
        width: 100%;
        height: 40px;
        color: #fff;
        align-items: center;
        font-size: 16px;

        img {
          width: 24px;
          height: 24px;
          margin: 0 8px;
        }
      }

      .real-time-count {
        width: 204px;
        margin: 24px auto;
      }

      .snap-photos {
        width: 204px;
        height: 269px;
        margin: 0 auto 24px auto;
      }
    }

    &__footer {
      width: calc(100% - 262px);
      height: 290px;
      background-color: rgba(48, 49, 54, 0.8);
      position: absolute;
      bottom: 0;
      left: 262px;

      .waring-count {
        width: 100%;
        height: 40px;
        align-items: center;
        background: url(@/assets/biaoti.png) no-repeat;
        color: #fff;

        img {
          width: 24px;
          height: 24px;
          margin: 0 8px;
        }

        div {
          margin: 0 20px;
        }
      }

      .warning-box {
        width: 100%;
        margin: 10px auto;
        height: calc(100% - 40px);
        padding: 24px 0 44px 0;

        &__item {
          // flex: 1;
          margin: 0 10px;
          height: 182px;
          background: rgba(54, 57, 64, 0.8);
        }
      }
    }
  }

  &__icon {
    img {
      width: 48px;
      height: 54px;
    }

    .shexiangtou1,
    .shexiangtou2,
    .shexiangtou3,
    .shexiangtou4,
    .shexiangtou5,
    .jiaofei,
    .kafei,
    .xiuxi,
    .damen,
    .video1,
    .video2,
    .video3,
    .video4,
    .video5,
    .zhonghe {
      position: absolute;
    }

    .shexiangtou1,
    .shexiangtou2,
    .shexiangtou3,
    .shexiangtou4,
    .shexiangtou5 {
      cursor: pointer;
    }

    .video1,
    .video2,
    .video3,
    .video4,
    .video5 {
      width: 454px;
      height: 360px;
      position: absolute;
      // border: 1px solid #b14e4c;
      z-index: 1;
    }

    .jiaofei,
    .kafei,
    .xiuxi,
    .damen,
    .zhonghe {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 18px;
      border-radius: 0px 8px 8px 0px;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      box-sizing: border-box;
      padding: 12px 15px 11px 36px;

      img {
        position: absolute;
        left: -15px;
      }
    }

    .shexiangtou1 { 
      top: 208px;
      left: 510px;
    }

    .video1 {
      top: 262px;
      left: 410px;
    }

    .shexiangtou2 {
      top: 208px;
      left: 1058px;
    }

    .video2 {
      top: 268px;
      left: 908px;
    }

    .shexiangtou3 {
      top: 644px;
      left: 899px;
    }

    .video3 {
      top: 702px;
      left: 799px;
    }

    .shexiangtou4 {
      top: 208px;
      left: 1456px;
    }

    .video4 {
      top: 263px;
      left: 1256px;
      // display: none;
    }

    .shexiangtou5 {
      top: 275px;
      left: 1610px;
    }

    .video5 {
      top: 325px;
      left: 1410px;
    }

    .jiaofei {
      top: 323px;
      left: 658px;
      background-color: #e6873a;
    }

    .zhonghe {
      top: 453px;
      left: 947px;
      background-color: #e8b224;
    }

    .damen {
      top: 360px;
      left: 1553px;
      background-color: #279fef;
    }

    .kafei {
      top: 132px;
      left: 1542px;
      background-color: #3acd6b;
    }

    .xiuxi {
      top: 487px;
      left: 1253px;
      background-color: #31ced2;
    }
  }

  .camera-info {
    span {
      // padding: 5px 0;
      font-size: 18px;
    }
  }
  .container__content__top{
    position: absolute;
    top:86px;
    left: 286px;
    .top-list{
      height: 40px;
      width: 100%;
    }
  }
}
</style>
